<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>시작하기 | Vue.js</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link href="static/css/css.css" rel="stylesheet">
    <link href="static/css/font-awesome.min.css" rel="stylesheet">
    <link rel="icon" href="static/picture/logo.png">
    <link rel="manifest" href="https://v3.ko.vuejs.org/manifest.json">
    <link rel="apple-touch-icon" href="https://v3.ko.vuejs.org/images/icons/apple-icon-152x152.png">
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script src="static/js/72160148.js" defer="defer"></script>
    <meta name="description" content="프로그레시브 JavaScript 프레임워크">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="static/css/0.styles.272e88f8.css" as="style"><link rel="preload" href="https://v3.ko.vuejs.org/assets/js/app.65092beb.js" as="script"><link rel="preload" href="https://v3.ko.vuejs.org/assets/js/11.cc09171a.js" as="script"><link rel="preload" href="https://v3.ko.vuejs.org/assets/js/131.32ea0459.js" as="script"><link rel="preload" href="https://v3.ko.vuejs.org/assets/js/31.16d5b2ba.js" as="script"><link rel="preload" href="https://v3.ko.vuejs.org/assets/js/22.d9d3e29a.js" as="script"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/1.9613a816.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/100.69bbc4fa.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/101.b096875a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/102.7cc42e67.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/103.4b782ccc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/104.66bebaf9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/105.67f04f04.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/106.2dd4da8b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/107.e0ab319e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/108.44700f0c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/109.ade2a74c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/110.ef43c403.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/111.661eb039.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/112.02181eb9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/113.e4f60a64.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/114.9719e8ff.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/115.befc2a9e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/116.fd210087.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/117.f4d0f5c7.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/118.d879f9ae.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/119.a214f5ab.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/12.30a14df0.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/120.2a76e60c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/121.c7ffc24c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/122.9b3cb7da.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/123.18456a1c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/124.e5eb7f0f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/125.de124cf1.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/126.d02732f3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/127.8aabaed6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/128.248188ce.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/129.9fc573a8.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/13.d002da48.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/130.4fcd7cd4.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/132.92d3e77f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/133.47b6c620.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/134.0070b721.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/135.2df511b8.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/136.52cbfb3d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/137.e54af219.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/138.578ee331.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/139.4f1e313e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/14.28a94efc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/140.4a71c864.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/141.42512568.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/142.8e627a20.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/143.494bef22.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/144.adcc88d3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/145.e9fbc788.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/146.3ae86117.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/147.96de24f1.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/148.9742056c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/149.b9f264db.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/15.09781c39.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/150.8c1b2fd2.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/151.04f2a8c9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/152.74b301a9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/153.395dac2a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/154.af391110.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/155.e68eb259.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/156.cfc43329.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/157.87114880.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/158.d60e0e29.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/159.aaf4b43d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/16.c5a9ddc9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/160.d10d0246.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/161.761b99af.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/162.8bc79336.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/163.9a3ef7cd.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/164.e35a465b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/165.61e2c644.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/166.444e85d7.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/167.b9a4614d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/168.f6cd4929.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/169.4b364791.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/17.815dd40f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/170.1ec6415f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/171.cf29d9ae.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/172.e559ec09.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/173.d1e2befb.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/174.fc91dc16.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/175.f31a9f57.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/176.e11784d7.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/177.3e1786ec.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/178.5842784f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/179.eb050d0a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/18.c5909eae.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/180.771aef6b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/181.90ae3a06.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/182.44c9dbbe.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/183.76a25d4d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/184.c58981b5.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/185.17154f46.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/186.17ccaed3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/187.729e36b7.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/188.72b13e51.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/189.f2965983.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/19.67341cf7.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/190.73186a1b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/191.15d3f9c0.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/192.2a5fd9a1.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/193.84af9cc7.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/194.e5adb2db.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/195.b5250e60.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/196.4efae780.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/197.7e7bdbe3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/198.475b6a19.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/199.19b733f9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/2.d340b672.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/20.ce4027b0.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/200.c0133636.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/201.2a9ddd30.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/202.fb73de5e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/203.e7a3f2d3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/204.5efb38aa.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/205.26131476.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/206.e0cf765f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/207.b3576133.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/208.2bd0c658.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/209.da83440a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/21.2a679bdc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/210.95a5bf98.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/211.f27bb62d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/212.be03b3b3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/213.fb4fa312.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/214.54f15403.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/215.63c9eeb3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/216.8f7ba7d6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/217.424c5d31.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/218.97bd3fca.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/219.3687bf09.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/220.99adb831.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/221.0d9e0580.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/222.e9613b8d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/223.3b8bcbec.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/224.b8eb7461.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/225.bcd909c4.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/226.91dd42a6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/227.55e2ef6e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/228.3193a93f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/229.44c785c9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/23.d3b7eeea.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/230.0e1f125d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/231.883858b4.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/232.de94c27d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/233.c9ba2a11.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/234.fa7230e9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/235.f1f1319c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/236.ef993470.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/237.3cd3b257.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/238.4b5957ba.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/239.3f4cd481.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/24.cf678de6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/240.0e43251f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/241.f9e0cb9a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/242.925cca21.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/243.d58f0877.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/244.3ddc90fa.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/245.1a0cb772.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/246.7d0fc9e2.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/247.f2e5a44c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/248.e5eec535.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/249.4e0c31d4.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/25.bd5c7a39.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/250.26707513.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/251.4deefc92.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/252.af5ce731.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/253.6897473a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/254.162cb071.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/255.ea37296f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/256.344b0954.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/257.03f0e734.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/258.062b2716.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/259.033fefa5.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/26.b541044a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/260.aedf2fa8.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/261.92a05217.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/262.086cb8ad.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/263.4ecf7892.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/264.4c8afec4.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/265.746b0d60.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/266.e98419eb.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/267.cd57f03f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/268.e2c79ca1.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/269.445dfc17.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/27.d9947256.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/270.eb9b7d3e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/271.b124ab4d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/272.aff22bf6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/273.94c4b4eb.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/274.a65a83c1.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/275.00590beb.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/276.2275b172.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/277.621ac0c6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/278.ac5ca006.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/279.5b428d58.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/28.ca006f52.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/280.245e3232.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/281.ca7fbdcc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/282.ec7eee6d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/283.0e9fd3ea.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/284.0f59843b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/285.50315f77.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/286.b4479560.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/287.021032f0.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/288.3bfb7576.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/289.3189b1bd.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/29.abd0fa07.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/290.95f47632.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/291.bfa2ca68.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/292.e4cc4d26.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/293.621259d8.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/294.c78c794c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/295.3b043ddc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/296.8f402f75.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/297.6d2de822.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/298.bcd3ace6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/299.cb051538.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/3.65073286.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/30.6564e63d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/300.ca34380a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/301.97fe3954.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/302.e3169f4e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/303.b83c64ca.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/304.809e0bc9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/305.d82629fd.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/32.5839e6b5.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/33.8bb34858.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/34.43b5bf68.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/35.d76d6925.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/36.f844993f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/37.ad4279ac.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/38.ab8ecf7b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/39.1584b2dc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/4.6ab8ad06.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/40.42a3fb40.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/41.c6e26eb5.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/42.555e0780.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/43.fc9f10b9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/44.b0ab0733.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/45.90e2206d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/46.9f825225.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/47.47c24c1c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/48.e21e6a5a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/49.98c82363.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/5.5957f147.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/50.4bfb2268.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/51.bde2f1cc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/52.8fd9e88a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/53.6a0b5241.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/54.4cb72a70.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/55.f4548912.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/56.f7ab785a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/57.f6cdfb3e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/58.8228be29.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/59.25907c47.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/6.afc2f0b4.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/60.5639fd79.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/61.34c64d3b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/62.5d4dc83b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/63.2c6187ca.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/64.ad1e9bee.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/65.696e576a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/66.6640896f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/67.cd716872.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/68.e8e86159.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/69.91d95252.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/7.0780ab64.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/70.0ab220e5.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/71.37e798f3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/72.9bee2d38.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/73.f538fa15.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/74.97a3df43.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/75.2338c2fc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/76.d69d155e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/77.5ee8e3f3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/78.9f25f950.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/79.c60d7c6c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/80.ffe7e5d0.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/81.61c61feb.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/82.7611f029.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/83.7a78ce7a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/84.e1349a57.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/85.b6e24b96.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/86.5056b56f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/87.951f0e6d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/88.3c8a0032.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/89.5d079e44.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/90.bef91643.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/91.b2917338.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/92.35aef40d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/93.a578a85b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/94.b099528a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/95.2d560a00.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/96.eb77404c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/97.7362166d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/98.f4387ebd.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/99.1e023987.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/vendors~docsearch.948bcc75.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/vendors~search-page.517e27fd.js">
    <link rel="stylesheet" href="static/css/0.styles.272e88f8.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><!----> <header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="index13.html" class="home-link router-link-active"><img src="static/picture/logo.png" alt="Vue.js" class="logo"> <span class="site-name can-hide">Vue.js</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="문서 메뉴" class="dropdown-title"><span class="title">문서</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="introduction4.html" class="nav-link">
  가이드
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  스타일 가이드
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  쿡북
</a></li><li class="dropdown-item"><!----> <a href="markdown1.html" class="nav-link">
  예제
</a></li><li class="dropdown-item"><!----> <a href="writing-guide1.html" class="nav-link">
  기여하기
</a></li><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Vue 2에서 이전
</a></li></ul></div></div><div class="nav-item"><a href="javascript:;" class="nav-link">
  API 레퍼런스
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="생태계" class="dropdown-title"><span class="title">생태계</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          커뮤니티
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  팀
</a></li><li class="dropdown-subitem"><a href="partners2.html" class="nav-link">
  파트너
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  참여하기
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  테마
</a></li></ul></li><li class="dropdown-item"><h4>
          공식 프로젝트
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="index4.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index5.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index6.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index9.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Weekly news
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Vue 후원하기" class="dropdown-title"><span class="title">Vue 후원하기</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  1회성 기부
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Recurring Pledges
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  티셔츠샵
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <div id="docsearch"></div></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="문서 메뉴" class="dropdown-title"><span class="title">문서</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="introduction4.html" class="nav-link">
  가이드
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  스타일 가이드
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  쿡북
</a></li><li class="dropdown-item"><!----> <a href="markdown1.html" class="nav-link">
  예제
</a></li><li class="dropdown-item"><!----> <a href="writing-guide1.html" class="nav-link">
  기여하기
</a></li><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Vue 2에서 이전
</a></li></ul></div></div><div class="nav-item"><a href="javascript:;" class="nav-link">
  API 레퍼런스
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="생태계" class="dropdown-title"><span class="title">생태계</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          커뮤니티
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  팀
</a></li><li class="dropdown-subitem"><a href="partners2.html" class="nav-link">
  파트너
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  참여하기
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  테마
</a></li></ul></li><li class="dropdown-item"><h4>
          공식 프로젝트
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="index4.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index5.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index6.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index9.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Weekly news
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Vue 후원하기" class="dropdown-title"><span class="title">Vue 후원하기</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  1회성 기부
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Recurring Pledges
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  티셔츠샵
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="" aria-current="page" class="active sidebar-link">시작하기</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#개요" class="sidebar-link">개요</a></li><li class="sidebar-sub-header"><a href="#시작하기-2" class="sidebar-link"></a></li><li class="sidebar-sub-header"><a href="#주목할-만한-새로운-기능들" class="sidebar-link">주목할 만한 새로운 기능들</a></li><li class="sidebar-sub-header"><a href="#주의해야-할-변경사항들" class="sidebar-link">주의해야 할 변경사항들</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#전역-api" class="sidebar-link">전역 API</a></li><li class="sidebar-sub-header"><a href="#템플릿-디렉티브" class="sidebar-link">템플릿 디렉티브</a></li><li class="sidebar-sub-header"><a href="#컴포넌트들" class="sidebar-link">컴포넌트들</a></li><li class="sidebar-sub-header"><a href="#렌더-함수" class="sidebar-link">렌더 함수</a></li><li class="sidebar-sub-header"><a href="#커스텀-요소들" class="sidebar-link">커스텀 요소들</a></li><li class="sidebar-sub-header"><a href="#기타-소소한-변경사항들" class="sidebar-link">기타 소소한 변경사항들</a></li><li class="sidebar-sub-header"><a href="#제거된-apis" class="sidebar-link">제거된 APIs</a></li></ul></li><li class="sidebar-sub-header"><a href="#지원-라이브러리들" class="sidebar-link">지원 라이브러리들</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#vue-cli" class="sidebar-link">Vue CLI</a></li><li class="sidebar-sub-header"><a href="#vue-router" class="sidebar-link">Vue Router</a></li><li class="sidebar-sub-header"><a href="#vuex" class="sidebar-link">Vuex</a></li><li class="sidebar-sub-header"><a href="#확장-devtools" class="sidebar-link">확장 Devtools</a></li><li class="sidebar-sub-header"><a href="#ide-지원" class="sidebar-link">IDE 지원</a></li><li class="sidebar-sub-header"><a href="#다른-프로젝트들" class="sidebar-link">다른 프로젝트들</a></li></ul></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>상세</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">v-for Array Refs</a></li><li><a href="javascript:;" class="sidebar-link">비동기 컴포넌트</a></li><li><a href="javascript:;" class="sidebar-link">속성 강제 규칙(Attribute Coercion Behavior)</a></li><li><a href="javascript:;" class="sidebar-link">class와 style이 포함된 $attrs</a></li><li><a href="javascript:;" class="sidebar-link">$children</a></li><li><a href="javascript:;" class="sidebar-link">커스텀 디렉티브</a></li><li><a href="javascript:;" class="sidebar-link">커스텀 엘리먼트 Interop(Custom Elements Interop)</a></li><li><a href="javascript:;" class="sidebar-link">Data Option</a></li><li><a href="javascript:;" class="sidebar-link">emits 옵션</a></li><li><a href="javascript:;" class="sidebar-link">이벤트 API</a></li><li><a href="javascript:;" class="sidebar-link">Filters</a></li><li><a href="javascript:;" class="sidebar-link">Fragments</a></li><li><a href="javascript:;" class="sidebar-link">함수형 컴포넌트(Functional Components)</a></li><li><a href="javascript:;" class="sidebar-link">글로벌 API(Global API)</a></li><li><a href="javascript:;" class="sidebar-link">전역 API 트리쉐이킹(Global API Treeshaking)</a></li><li><a href="javascript:;" class="sidebar-link">인라인 템플릿 속성(Inline Template Attribute)</a></li><li><a href="javascript:;" class="sidebar-link">key 속성</a></li><li><a href="javascript:;" class="sidebar-link">키 코드 수식어(KeyCode Modifiers)</a></li><li><a href="javascript:;" class="sidebar-link">$listeners 제거됨</a></li><li><a href="javascript:;" class="sidebar-link">Mount API changes</a></li><li><a href="javascript:;" class="sidebar-link">propsData</a></li><li><a href="javascript:;" class="sidebar-link">Props Default 함수의 this 접근</a></li><li><a href="javascript:;" class="sidebar-link">렌더 함수(Render Function) API</a></li><li><a href="javascript:;" class="sidebar-link">슬롯 통합(Slots Unification)</a></li><li><a href="javascript:;" class="sidebar-link">Suspense</a></li><li><a href="javascript:;" class="sidebar-link">Transition 클래스 변경</a></li><li><a href="javascript:;" class="sidebar-link">트랜지션 그룹 루트 엘리먼트</a></li><li><a href="javascript:;" class="sidebar-link">v-on.native 수정자가 제거 되었습니다.</a></li><li><a href="javascript:;" class="sidebar-link">v-model</a></li><li><a href="javascript:;" class="sidebar-link">v-if와 v-for의 우선순위</a></li><li><a href="javascript:;" class="sidebar-link">v-bind 병합 동작</a></li><li><a href="javascript:;" class="sidebar-link">VNode Lifecycle Events</a></li><li><a href="javascript:;" class="sidebar-link">배열 Watch</a></li></ul></section></li></ul> </aside> <main class="page"><!---->  <div class="theme-default-content content__default"><h1 id="시작하기"><a href="#시작하기" class="header-anchor">#</a> 시작하기</h1> <div class="custom-block info"><p class="custom-block-title">INFO</p><p>Vue.js의 새로운 기능에 대한 정보가 필요하신가요? 그렇다면 <a href="javascript:;">필수가이드</a>를 확인하세요.</p></div><p>이번 가이드는 Vue 2 경험이 있으면서, Vue 3 변경사항 및 새로운 기능을 배우고 싶은 사용자를 주요 독자로 삼았습니다.** 이 문서는 Vue 3를 시도하기 전 꼭 읽어야 하는 것은 아닙니다. ** 변한 것이 많아 보이지만, Vue에 관해서 알고 좋아하던 것들은 여전히 같습니다.; 그렇지만 우리는 문서화 된 변경 점에 대한 예제들과 자세한 설명을 가능한 철저하게 제공하고 싶었습니다.</p> <ul><li><a href="#quickstart">시작하기</a></li> <li><a href="#notable-new-features">주목할 만한 새로운 기능들</a></li> <li><a href="#breaking-changes">주의해야 하는 변경사항들</a></li> <li><a href="#supporting-libraries">지원 라이브러리들</a></li></ul> <h2 id="개요"><a href="#개요" class="header-anchor">#</a> 개요</h2> <p><br> <iframe src="javascript:;" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="allowfullscreen"></iframe></p> <p><a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue Mastery<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>에서 Vue 3를 배워보세요.</p> <h2 id="시작하기-2"><a href="#시작하기-2" class="header-anchor">#</a> <a>시작하기</a></h2> <ul><li><p>CDN을 통해 시작: <code><script src="static/js/vue@next.js"></script></code></p></li> <li><p><a href="javascript:;" target="_blank" rel="noopener noreferrer">Codepen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>의 인브라우저 플레이그라운드에서 시작</p></li> <li><p><a href="javascript:;" target="_blank" rel="noopener noreferrer">CodeSandbox<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>의 인브라우저 샌드박스에서 시작</p></li> <li><p><a href="javascript:;" target="_blank" rel="noopener noreferrer">Vite<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>를 사용해 시작:</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> init vite-app hello-vue3 <span class="token comment"># 또는 yarn create vite-app hello-vue3</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p><a href="index6.html" target="_blank" rel="noopener noreferrer">vue-cli<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>를 사용해 시작:</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> -g @vue/cli <span class="token comment"># 또는 yarn global add @vue/cli</span>
vue create hello-vue3
<span class="token comment"># select vue 3 preset</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ul> <h2 id="주목할-만한-새로운-기능들"><a href="#주목할-만한-새로운-기능들" class="header-anchor">#</a> 주목할 만한 새로운 기능들</h2> <p>Vue 3에서 주목할 만한 새로운 기능 중 일부는 다음과 같습니다.</p> <ul><li><a href="javascript:;">Composition API</a></li> <li><a href="javascript:;">Teleport</a></li> <li><a href="javascript:;">Fragments</a></li> <li><a href="javascript:;">Emits 컴포넌트 옵션</a></li> <li><a href="javascript:;" target="_blank" rel="noopener noreferrer">커스텀 렌더들(custom renderers)을 생성하기 위한 <code>@vue/runtime-core</code>의 <code>createRenderer</code> API <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="javascript:;" target="_blank" rel="noopener noreferrer">SFC Composition API의 더 쉬운 표현 (<code>&lt;script setup&gt;</code>)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <span class="badge warning" style="vertical-align:top;" data-v-0cc74adb="">experimental</span></li> <li><a href="javascript:;" target="_blank" rel="noopener noreferrer">SFC State-driven CSS 변수 (<code>&lt;style vars&gt;</code>)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <span class="badge warning" style="vertical-align:top;" data-v-0cc74adb="">experimental</span></li> <li><a href="javascript:;" target="_blank" rel="noopener noreferrer">SFC의 <code>&lt;style scoped&gt;</code>는 전역 규칙으로 사용하거나 특정 slot의 규칙으로 사용가능합니다. <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="주의해야-할-변경사항들"><a href="#주의해야-할-변경사항들" class="header-anchor">#</a> 주의해야 할 변경사항들</h2> <div class="custom-block info"><p class="custom-block-title">INFO</p><p>우리는 Vue 2 호환 동작과 호환되지 않는 사용에 대한 런타임 경고가있는 Vue 3용 마이그레이션 빌드 작업 중입니다. 중요한 Vue 2 앱을 마이그레이션 할 계획이라면, 원활한 환경을 위해 마이그레이션 빌드를 기다리는 것이 좋습니다.</p></div><p>다음은 2.x의 사용자가 주의해야 할 변경사항들로 구성됩니다.</p> <h3 id="전역-api"><a href="#전역-api" class="header-anchor">#</a> 전역 API</h3> <ul><li><a href="javascript:;">전역 Vue API가 애플리케이션 인스턴스를 사용하도록 변경 되었습니다.</a></li> <li><a href="javascript:;">글로벌 및 내부 API가 트리쉐이킹(*Treeshaking) 가능하도록 재구성되었습니다.</a></li></ul> <h3 id="템플릿-디렉티브"><a href="#템플릿-디렉티브" class="header-anchor">#</a> 템플릿 디렉티브</h3> <ul><li><a href="javascript:;"><code>v-model</code> 컴포넌트의 사용법이 재정의되었습니다.</a></li> <li><a href="javascript:;"><code>&lt;template v-for&gt;</code>와 <code>v-for</code>가 아닌 노드들의 <code>key</code> 사용 방법이 변경되었습니다.</a></li> <li><a href="javascript:;">같은 요소에 <code>v-if</code>와 <code>v-for</code> 사용될 때 우선순위가 변경 되었습니다.</a></li> <li><a href="javascript:;">이제부터 <code>v-bind=&quot;object&quot;</code>는 순서에 민감합니다.</a></li> <li><a href="javascript:;"><code>v-for</code>내부의 <code>ref</code>는 더이상 refs 참조 배열을 자동생성하지 않습니다. </a></li></ul> <h3 id="컴포넌트들"><a href="#컴포넌트들" class="header-anchor">#</a> 컴포넌트들</h3> <ul><li><a href="javascript:;">함수형 컴포넌트는 오직 일반 함수를 사용해서만 만들 수 있습니다.</a></li> <li><a href="javascript:;">싱글 파일 컴포넌트(SFC) <code>&lt;template&gt;</code> 및 <code>함수형</code> 컴포넌트 옵션의 <code>functional</code> 속성은 더 이상 사용되지 않습니다.</a></li> <li><a href="javascript:;">비동기 컴포넌트는 이제 생성을 위해<code>defineAsyncComponent</code> 메서드가 필요합니다.</a></li></ul> <h3 id="렌더-함수"><a href="#렌더-함수" class="header-anchor">#</a> 렌더 함수</h3> <ul><li><a href="javascript:;">렌더함수 API가 변경되었습니다.</a></li> <li><a href="javascript:;"><code>$scopedSlots</code>속성이 제거되고 모든 슬롯이 <code>$slots</code>를 통해 함수로 노출됩니다.</a></li></ul> <h3 id="커스텀-요소들"><a href="#커스텀-요소들" class="header-anchor">#</a> 커스텀 요소들</h3> <ul><li><a href="javascript:;">이제 커스텀 요소 허용이 Template 컴파일 시 수행됩니다.</a></li> <li><a href="javascript:;">사용자 지정 속성 <code>is</code>의 사용은 예약어인 <code>&lt;component&gt;</code>태그로 제한됩니다.</a></li></ul> <h3 id="기타-소소한-변경사항들"><a href="#기타-소소한-변경사항들" class="header-anchor">#</a> 기타 소소한 변경사항들</h3> <ul><li><code>destroyed</code> 라이프사이클 옵션의 명칭이 <code>unmounted</code>로 변경되었습니다.</li> <li><code>beforeDestroy</code> 생명주기 옵션의 명칭이 <code>beforeUnmount</code>로 변경되었습니다.</li> <li><a>Props <code>default</code> 팩토리 함수는 더이상 <code>this</code>에 접근할 수 없습니다.</a></li> <li><a href="javascript:;">컴포넌트 라이프사이클에 맞게 사용자 지정 디렉티브 API가 변경 되었습니다.</a></li> <li><a href="javascript:;"><code>data</code>옵션은 항상 함수로 선언되어야 합니다.</a></li> <li><a href="javascript:;">이제 mixins의 <code>data</code> 옵션은 얕게 병합됩니다.</a></li> <li><a href="javascript:;">속성 강제 방법이 변경되었습니다.</a></li> <li><a href="javascript:;">몇몇 Transition 클래스의 명칭이 변경되었습니다.</a></li> <li><a href="javascript:;">배열에서 watch 콜백은 배열이 교체될 때만 발생합니다. <br>배열의 변경 사항에 대해 watch 콜백을 실행하려면, 반드시 <code>deep</code> 옵션을 설정해야 합니다.</a></li> <li>특수 디렉티브(<code>v-if / else-if / else</code>, <code>v-for</code> 또는 <code>v-slot</code>)이 없는 <code>&lt;template&gt;</code> 태그는 이제 일반 요소로 처리되며 내부 콘텐츠를 렌더링하는 대신 native <code>&lt;template&gt;</code> 요소가 됩니다</li> <li>Vue 2.x에서 애플리케이션 루트 컨테이너의 <code>outerHTML</code>은 루트 컴포넌트 템플릿으로 대체됩니다. (또는 루트 컴포넌트에 템플릿/렌더링 옵션이 없는 경우 최종적으로 템플릿에 컴파일됩니다.) Vue 3.x는 이제 애플리케이션 컨테이너의 <code>innerHTML</code>을 대신 사용합니다. 이는 컨테이너 자체가 더이상 템플릿의 일부로서 고려되지 않음을 의미합니다.</li></ul> <h3 id="제거된-apis"><a href="#제거된-apis" class="header-anchor">#</a> 제거된 APIs</h3> <ul><li><a href="javascript:;"><code>v-on</code> 수정자로서의 <code>키코드(keyCode)</code> 지원</a></li> <li><a href="javascript:;">$on, $off 그리고 $once 인스턴스 메소드</a></li> <li><a href="javascript:;">필터</a></li> <li><a href="javascript:;">인라인 템플릿 속성</a></li> <li><code>$destroy</code> 인스턴스 메서드. 사용자는 더 이상 개별 Vue 구성 요소의 수명주기를 수동으로 관리 할 필요가 없습니다.</li></ul> <h2 id="지원-라이브러리들"><a href="#지원-라이브러리들" class="header-anchor">#</a> 지원 라이브러리들</h2> <p>이제부터 우리의 모든 공식 라이브러리들과 도구들은 Vue 3를 지원합니다. 하지만 여전히 대부분은 베타 상태이며 npm에서 <code>next</code> dist 태그로 배포 됩니다. <strong>2020년 말까지 <code>latest</code> dist 태그를 사용하도록 모든 프로젝트를 안정화하고 전환 할 계획입니다.</strong></p> <h3 id="vue-cli"><a href="#vue-cli" class="header-anchor">#</a> Vue CLI</h3> <p><a href="javascript:;" target="_blank" noopener="" noreferrer=""></a><img src="static/picture/cli.jpg"></p> <p>v4.5.0부터 <code>vue-cli</code>는 새 프로젝트를 만들 때 Vue3를 사전 설정하는 기본 옵션을 제공합니다. 이제 <code>vue-cli</code>를 업그레이드하고 <code>vue create</code>를 실행하여 Vue 3프로젝트를 만들 수 있습니다.</p> <ul><li><a href="index6.html">관련문서</a></li> <li><a href="javascript:;" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="vue-router"><a href="#vue-router" class="header-anchor">#</a> Vue Router</h3> <p><a href="javascript:;" target="_blank" noopener="" noreferrer=""></a><img src="static/picture/next.svg"></p> <p>Vue Router 4.0은 Vue 3를 지원하며, 자체적으로 많은 주의해야 할 변경사항들이 있습니다. 자세한 전문은 <a href="javascript:;" target="_blank" rel="noopener noreferrer">README<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>를 확인하세요.</p> <ul><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="javascript:;" target="_blank" rel="noopener noreferrer">RFCs<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="vuex"><a href="#vuex" class="header-anchor">#</a> Vuex</h3> <p><a href="javascript:;" target="_blank" noopener="" noreferrer=""></a><img src="static/picture/next1.svg"></p> <p>Vuex 4.0는 3.x와 거의 동일한 API로 Vue3 지원합니다. 유일하게 주의해야 할 변경사항은 <a href="javascript:;" target="_blank" rel="noopener noreferrer"> 플러그인 설치 방법 <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>입니다.</p> <ul><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="확장-devtools"><a href="#확장-devtools" class="header-anchor">#</a> 확장 Devtools</h3> <p>우리는 여러 버전의 Vue를 지원하기 위해 새로운 UI와 리팩토링된 새로운 버전의 Devtools를 개발 중입니다. 새 버전은 현재 베타 버전이며 현재는 Vue 3만 지원합니다. Vuex와 Router의 통합도 진행 중입니다.</p> <ul><li><p>Chrome: <a href="javascript:;" target="_blank" rel="noopener noreferrer">Chrome web store에서 설치<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <ul><li>Note: 베타 채널이 정식 버전의 devtools과 충돌 할 수 있으므로 베타 채널이 제대로 작동하려면 정식 버전을 일시적으로 비활성화해야 할 수 있습니다.</li></ul></li> <li><p>Firefox: <a href="javascript:;" target="_blank" rel="noopener noreferrer">서명된 부가기능 다운로드<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> (Assets의 <code>.xpi</code>파일)</p></li></ul> <h3 id="ide-지원"><a href="#ide-지원" class="header-anchor">#</a> IDE 지원</h3> <p><a href="javascript:;" target="_blank" rel="noopener noreferrer">VSCode<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>와 함께 Vue 3의 IDE 지원을 도와주는 공식 확장 프로그램인 <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vetur<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>를 사용하는 것을 추천합니다.</p> <h3 id="다른-프로젝트들"><a href="#다른-프로젝트들" class="header-anchor">#</a> 다른 프로젝트들</h3> <table><thead><tr><th>프로젝트</th> <th>npm</th> <th>Repo</th></tr></thead> <tbody><tr><td>@vue/babel-plugin-jsx</td> <td>[]<img src="static/picture/babel-plugin-jsx.svg" alt="rc"></td> <td>[[GitHub]]</td></tr> <tr><td>eslint-plugin-vue</td> <td>[]![beta]</td> <td>[[GitHub]]</td></tr> <tr><td>@vue/test-utils</td> <td>[]![beta]</td> <td>[[GitHub]]</td></tr> <tr><td>vue-class-component</td> <td>[]![beta]</td> <td>[[GitHub]]</td></tr> <tr><td>vue-loader</td> <td>[]![beta]</td> <td>[[GitHub]]</td></tr> <tr><td>rollup-plugin-vue</td> <td>[]![beta]</td> <td>[[GitHub]]</td></tr></tbody></table> <p>[]: https://www.npmjs.com/package/@vue/babel-plugin-jsx
[GitHub]: https://github.com/vuejs/jsx-next
[beta]: https://img.shields.io/npm/v/@vue/devtools/beta.svg
[]: https://www.npmjs.com/package/@vue/devtools/v/beta
[GitHub]: https://github.com/vuejs/vue-devtools/tree/next
[beta]: https://img.shields.io/npm/v/eslint-plugin-vue.svg
[]: https://www.npmjs.com/package/eslint-plugin-vue
[GitHub]: https://github.com/vuejs/eslint-plugin-vue
[beta]: https://img.shields.io/npm/v/@vue/test-utils/next.svg
[]: https://www.npmjs.com/package/@vue/test-utils/v/next
[GitHub]: https://github.com/vuejs/vue-test-utils-next
[beta]: https://img.shields.io/npm/v/@ant-design-vue/babel-plugin-jsx.svg
[]: https://www.npmjs.com/package/@ant-design-vue/babel-plugin-jsx
[GitHub]: https://github.com/vueComponent/jsx
[beta]: https://img.shields.io/npm/v/vue-class-component/next.svg
[]: https://www.npmjs.com/package/vue-class-component/v/next
[GitHub]: https://github.com/vuejs/vue-class-component/tree/next</p></div> <footer class="page-edit" data-v-24e048ac=""><div class="container" data-v-24e048ac=""><p data-v-24e048ac="">
      Deployed on
      <a href="javascript:;" data-v-24e048ac="">Netlify</a>.
      <!----> <br data-v-24e048ac=""> <span class="prefix" data-v-24e048ac="">Last updated:</span> <span class="time" data-v-24e048ac="">2021-04-29, 13:42:53 UTC</span></p></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="javascript:;">v-for Array Refs</a>
      →
    </span></p></div> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="static/js/app.65092beb.js" defer=""></script><script src="static/js/11.cc09171a.js" defer=""></script><script src="static/js/131.32ea0459.js" defer=""></script><script src="static/js/31.16d5b2ba.js" defer=""></script><script src="static/js/22.d9d3e29a.js" defer=""></script>
  </body>
</html>
